import React, { useEffect, useState } from 'react';
import { Card, Form, Radio, Col, Checkbox, Row, Table, Button, Modal } from 'antd';
import Gengai from './Gengai';
import YhqxglApi from '../../../../../utils/apis/YhqxglApi'

export default function Yhqxgl() {


    //对话框开关
    const [isModalOpen, setIsModalOpen] = useState(false);
    
    //表格数据
    const [dataSource, setdataSource] = useState()
    const [currentTime, setCurrentTime] = useState(null);

    const [gdate, setGgdate] = useState(false)
    //修改权限的值
    const [value, setValue] = useState(1);

    useEffect(() => {

    }, [])


    useEffect(() => {
        //console.log("1")
        YhqxglApi.YhList().then(e => {
            //console.log("@@", e.rows)
            const data = e.rows.map(async f => {
                const qxRes = await YhqxglApi.Yh_ID(f.userId);
                return {
                  ...f,
                  qx: qxRes.data
                };
              });
            //console.log("@@", e.rows)
            Promise.all(data).then(result => {
                //console.log("3", result)
                setdataSource(result)
              });
            //setdataSource(e.rows)
        })

        //console.log("2",dataSource)
    }, [isModalOpen])

    const columns = [
        {
            title: '用户编号',
            dataIndex: 'userId',
            key: 'userId',
        },
        {
            title: '用户名称',
            dataIndex: 'userName',
            key: 'userName',

        },
        {
            title: '用户昵称',
            dataIndex: 'nickName',
            key: 'nickName',

        },
        {
            title: '用户权限',
            dataIndex: 'params',
            key: 'params',
            render: (_, record) => {
                // const onChange = (checkedValues) => {
                //     console.log('checked = ', checkedValues, record.qx);

                // };

                return (
                    <Checkbox.Group
                        //onChange={onChange}
                        value={record.qx}
                    >
                        <Row>
                            <Col span={8}>
                                <Checkbox value="A_jcyj">监测预警</Checkbox>
                            </Col>
                            <Col span={8}>
                                <Checkbox value="B_sfxzqx">是否限制区县</Checkbox>
                            </Col>
                            <Col span={8}>
                                <Checkbox value="C_pczl">排查治理</Checkbox>
                            </Col>
                            <Col span={8}>
                                <Checkbox value="D_sp">审批</Checkbox>
                            </Col>
                            <Col span={8}>
                                <Checkbox value="E_dczl">调查管理</Checkbox>
                            </Col>
                            <Col span={8}>
                                <Checkbox value="F_zqzb">灾情直报</Checkbox>
                            </Col>
                        </Row>
                    </Checkbox.Group>
                )
            }
        },
        {
            title: '权限更改',
            dataIndex: '1',
            key: '1',
            render: (text, record, index) => {

                return (
                    <Button onClick={() => {
                        const date = new Date();
                        //console.log('@', record, dataSource)
                        const value = YhqxglApi.Yh_ID(record.userId).then(e => {
                            //console.log('Value', e, record.userId)
                            return e
                        })
                        setGgdate(record?.userId)
                        setIsModalOpen(true);
                    }}>更改</Button>
                )

            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
    ];

    const handleOk = () => {
        const arr = value;

// 将数组中的元素转换为含引号的字符串
const str = arr.map(item =>{
    let menuIds;
    switch(item){
    case 'A_jcyj':menuIds=2001;break;
    case 'B_sfxzqx':menuIds=2002;break;
    case 'C_pczl':menuIds=2003;break;
    case 'D_sp':menuIds=2004;break;
    case 'E_dczl':menuIds=2005;break;
    case 'F_zqzb':menuIds=2006;break;
    default: ;
} 
return `menuIds=${menuIds}`}).join('&');
//console.log(str); // "'apple', 'banana', 'orange'" 
       YhqxglApi.ReviseYhqx_ID(gdate,str)
        setValue([])
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    return (
        <div className='layout-h h100' style={{ color: 'white' }} >
            <Card size='small' className='h100' style={{
                width: '100%',
                marginRight: 12,
                overflowX: "auto",
                overflowY: "auto",
                color: 'white',
                //backgroundColor:'white'
            }}>

                <Table dataSource={dataSource} columns={columns} />



                {isModalOpen&&<Modal title="用户权限管理"
                    open={isModalOpen}

                    onOk={handleOk}
                    onCancel={handleCancel}
                >
                   <Gengai userID={gdate} setValue={setValue}></Gengai>
                </Modal>}
                
            </Card>
        </div>
    )
}
